<template>
	<view class="uni-swipe-action">
		<movable-area class="uni-swipe-area" :style="{ backgroundColor: bgColor }">
			<movable-view
				class="uni-swipe-view"
				@change="change"
				@touchend="touchend"
				@touchstart="touchstart"
				direction="horizontal"
				:disabled="disabled"
				:x="moveX"
				:style="{
					width: movableViewWidth ? movableViewWidth : '100%'
				}"
			>
				<view
					class="uni-swipe-content"
					@tap.stop="contentClick"
				>
					<slot></slot>
				</view>
				<view class="uni-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
					<view class="uni-btn-text">{{ item.text }}</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
/**
 * uni-swipe-action 左滑单元格
 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
 */
export default {
	name: 'uni-swipe-action',
	props: {
		// 整个组件背景颜色
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		// 数组形式，可以配置背景颜色和文字
		options: {
			type: Array,
			default() {
				return []
			}
		},
		// 标识符，点击时候用于区分点击了哪一个
		index: {
			type: [String, Number],
			default: 0
		},
		// 按钮宽度，单位rpx
		btnWidth: {
			type: [String, Number],
			default: 180
		},
		// 是否禁止某个swipeAction滑动
		disabled: {
			type: Boolean,
			default: false
		},
		// 打开或者关闭某个组件
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			moveX: 0,
			showBtn: false,
			movableViewWidth: '100%'
		};
	},
	watch: {
		show: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					this.open();
				} else {
					this.close();
				}
			}
		}
	},
	mounted() {
		this.movableViewWidth = `calc(100% + ${this.options.length * this.btnWidth}rpx)`;
	},
	methods: {
		// 按钮样式
		btnStyle(style) {
			return {
				width: this.btnWidth + 'rpx',
				...style
			};
		},
		// 移动事件
		change(e) {
			this.moveX = e.detail.x;
		},
		// 触摸开始
		touchstart(e) {
			// 可以在这里处理触摸开始逻辑
		},
		// 触摸结束
		touchend(e) {
			const threshold = this.options.length * this.btnWidth / 2;
			if (Math.abs(this.moveX) > threshold) {
				this.open();
			} else {
				this.close();
			}
		},
		// 内容点击
		contentClick() {
			this.$emit('click', {
				index: this.index
			});
		},
		// 按钮点击
		btnClick(btnIndex) {
			this.$emit('change', {
				index: this.index,
				btnIndex: btnIndex,
				content: this.options[btnIndex]
			});
		},
		// 打开
		open() {
			this.moveX = -this.options.length * this.btnWidth;
			this.showBtn = true;
		},
		// 关闭
		close() {
			this.moveX = 0;
			this.showBtn = false;
		}
	}
};
</script>

<style scoped lang="scss">
.uni-swipe-action {
	width: 100%;
	overflow: hidden;
}

.uni-swipe-area {
	width: 100%;
	height: auto;
	position: relative;
}

.uni-swipe-view {
	display: flex;
	flex-direction: row;
	height: auto;
	position: relative;
}

.uni-swipe-content {
	flex: 1;
	min-width: 100%;
	background-color: #fff;
}

.uni-swipe-del {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #dd524d;
	color: #fff;
	font-size: 28rpx;
	height: 100%;
}

.uni-btn-text {
	color: #fff;
	font-size: 28rpx;
}
</style>